const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
//const minicss=require("mini-css-extract-plugin")
const htmlplugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源头文件
    filename:"index.html"//生成首页的文件名称
})
// const css=new minicss({
//     filename:"/css/[name].css",
//     chunkFilename:"[id].css"
// })
module.exports={//webpack基于node构建的
    mode:"development",
    // entry: {
    //     index: './src/index.js',
    //     main: './src/main.js'
    // },  
    // output: {
    //     filename: '[name].js',
    //     path: path.resolve(__dirname, 'dist')
    // }, 
    entry: {
        index: './src/index.js'
       
    },  
    output: {
        filename: 'main.js',//通过热加载输出script文件挂载在目录与index.HTML一样
        path: path.resolve(__dirname, 'dist')
    }, 
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins:[
        htmlplugin   
     ],
    module: {//所以第三方模块的配置规则
        rules: [
            { test:/\.js|\jsx$/,use:'babel-loader',exclude:/node_modules/},
           { test:/\.css/,use:['style-loader','css-loader']},
        //    {test:/\.css$/,use:[{loader:minicss.loader,options:{
        //        publicPath:"css/"
        //    }},"css-loader"]},
        //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
        //     options: {
        //        modules: {
        //            localIdentName: "[path][name]-[local]-[hash:5]"
        //        }//import css from '路径' console.log(css)会生成模块
        //        //这是react的处理办法 vue就是style里面写scoped
        //        //支持id与class 控制台输出的模块是健对值形式
        //     }//css scss less一样的配置模块化
        //    }]},
            // { test:/\.(jpg|PNG|png|jpeg)/,use:[{loader:"url-loader",options:{
            //     outputPath:"images/",
            //     limit:500
            // }}]},
            {test:/\.(jpg|PNG|png|jpeg)/,use:"url-loader"}
          //  { test:/\.less/,use:['style-loader','css-loader']}
            
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".json"]
    }
   
}
